<nzx-between
  [nzxDisabled]="nzxDisabled"
  [nzxStartDisabled]="nzxStartDisabled"
  [nzxEndDisabled]="nzxEndDisabled"
  [nzxSize]="nzxSize"
>
  <ng-container
    start
    *ngTemplateOutlet="
      typeTemplate;
      context: {
        $implicit: {
          dir: nzxStartReName,
          disabled: nzxDisabled || nzxStartDisabled,
          placeholder: nzxStartPlaceholder,
          nzSuffixIcon: nzxStartSuffixIcon,
          nzBackdrop: nzxStartBackdrop,
          nzAutoFocus: nzxStartAutoFocus,
          nzId: nzxStartId,
          nzAddOn: nzxStartAddOn,
          nzAllowEmpty: nzxStartAllowEmpty,
          nzClearText: nzxStartClearText,
          nzDefaultOpenValue: nzxStartDefaultOpenValue,
          nzDisabledHours: nzxStartDisabledHours,
          nzDisabledMinutes: nzxStartDisabledMinutes,
          nzDisabledSeconds: nzxStartDisabledSeconds,
          nzHideDisabledOptions: nzxStartHideDisabledOptions,
          nzHourStep: nzxStartHourStep,
          nzMinuteStep: nzxStartMinuteStep,
          nzNowText: nzxStartNowText,
          nzOkText: nzxStartOkText,
          nzPopupClassName: nzxStartPopupClassName,
          nzSecondStep: nzxStartSecondStep,
          nzUse12Hours: nzxStartUse12Hours,
          nzOpenChange: nzxStartOpenChange,
          nzStatus: nzxStartStatus
        }
      }
    "
  ></ng-container>
  <ng-container
    end
    *ngTemplateOutlet="
      typeTemplate;
      context: {
        $implicit: {
          dir: nzxEndReName,
          disabled: nzxDisabled || nzxEndDisabled,
          placeholder: nzxEndPlaceholder,
          nzSuffixIcon: nzxEndSuffixIcon,
          nzBackdrop: nzxEndBackdrop,
          nzAutoFocus: nzxEndAutoFocus,
          nzId: nzxEndId,
          nzAddOn: nzxEndAddOn,
          nzAllowEmpty: nzxEndAllowEmpty,
          nzClearText: nzxEndClearText,
          nzDefaultOpenValue: nzxEndDefaultOpenValue,
          nzDisabledHours: nzxEndDisabledHours,
          nzDisabledMinutes: nzxEndDisabledMinutes,
          nzDisabledSeconds: nzxEndDisabledSeconds,
          nzHideDisabledOptions: nzxEndHideDisabledOptions,
          nzHourStep: nzxEndHourStep,
          nzMinuteStep: nzxEndMinuteStep,
          nzNowText: nzxEndNowText,
          nzOkText: nzxEndOkText,
          nzPopupClassName: nzxEndPopupClassName,
          nzSecondStep: nzxEndSecondStep,
          nzUse12Hours: nzxEndUse12Hours,
          nzOpenChange: nzxEndOpenChange,
          nzStatus: nzxEndStatus
        }
      }
    "
  ></ng-container>
</nzx-between>

<ng-template #typeTemplate let-data>
  <nz-time-picker
    [(ngModel)]="nzxValue[data.dir]"
    (ngModelChange)="ngModelChange()"
    [nzDisabled]="data.disabled"
    [nzPlaceHolder]="data.placeholder"
    [nzSize]="nzxSize"
    [nzSuffixIcon]="data.nzSuffixIcon || 'clock-circle'"
    [nzBackdrop]="data.nzBackdrop"
    [nzAutoFocus]="data.nzAutoFocus"
    [nzFormat]="nzFormat == null ? 'HH:mm:ss' : nzFormat"
    [nzId]="data.nzId"
    [nzAddOn]="data.nzAddOn"
    [nzAllowEmpty]="data.nzAllowEmpty == null ? true : data.nzAllowEmpty"
    [nzClearText]="data.nzClearText == null ? '清空' : data.nzClearText"
    [nzDefaultOpenValue]="data.nzDefaultOpenValue || nzDefaultOpenValue"
    [nzDisabledHours]="data.nzDisabledHours"
    [nzDisabledMinutes]="data.nzDisabledMinutes"
    [nzDisabledSeconds]="data.nzDisabledSeconds"
    [nzHideDisabledOptions]="data.nzHideDisabledOptions"
    [nzHourStep]="data.nzHourStep == null ? 1 : data.nzHourStep"
    [nzMinuteStep]="data.nzMinuteStep == null ? 1 : data.nzMinuteStep"
    [nzNowText]="data.nzNowText"
    [nzOkText]="data.nzOkText"
    [nzPopupClassName]="data.nzPopupClassName"
    [nzSecondStep]="data.nzSecondStep == null ? 1 : data.nzSecondStep"
    [nzUse12Hours]="data.nzUse12Hours"
    (nzOpenChange)="data.nzOpenChange.emit($event)"
    [nzStatus]="data.nzStatus"
  ></nz-time-picker>
</ng-template>
